<template>
	</template>

<script>
	const projectApi = '/base/department/list'
	const personApi = '/system/user/getProjectPersonnel'
	const listApi = '/statistics/countSatisfactionByMaintenance'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			const currentDate1 = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				date1: currentDate1,
				projectArray: [],
				personArray: [],
				projectArray1: [],
				personArray1: [],
				index: 0,
				index1: 0,
				listArray: [],
				projectDepartmentId: '',
				engineerId: '',
			};
		},
		created() {
			// 查询项目部
			this.$api.request(projectApi, {
				method: 'get',
			}).then(res => {
				if (res.code == 200) {
					this.projectArray1 = res.data.list
					this.projectArray = res.data.list.map(item => item.name)
					this.projectArray.unshift('')
					this.projectArray1.unshift({
						id: ''
					})
				}
			}).catch(() => {})

			// 查询责任人
			this.$api.request(personApi, {
				method: 'get',
			}).then(res => {
				if (res.code == 200) {
					this.personArray1 = res.data.row
					this.personArray = res.data.row.map(item => item.realName)
					this.personArray.unshift('')
					this.personArray1.unshift({
						id: ''
					})
				}
			}).catch(() => {})

			// 查询列表数据
			this.$api.request(listApi, {
				method: 'get',
			}).then(res => {
				if (res.code == 200) {
					this.listArray = res.data.list
				}
			}).catch(() => {})
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			startDate1() {
				return this.getDate('start');
			},
			endDate1() {
				return this.getDate('end');
			}
		},
		methods: {
			// 选择项目部
			bindPickerChange: function(e) {
				this.index = e.target.value
				this.projectArray1.forEach((item, i) => {
					if (i == e.target.value) this.projectDepartmentId = item.id
				})
			},
			bindPickerChange1: function(e) {
				this.index1 = e.target.value
				this.personArray1.forEach((item, i) => {
					if (i == e.target.value) this.engineerId = item.id
				})
			},

			refresh() {
				this.$api.request(listApi, {
					method: 'get',
				}).then(res => {
					if (res.code == 200) {
						this.listArray = res.data.list
					}
				}).catch(() => {})
			},

			// 查询按钮
			formSubmit: function(e) {
				var formdata = e.detail.value
				// 查询列表数据
				this.$api.request(listApi, {
					method: 'get',
					data: {
						startTime: this.date,
						endTime: this.date1,
						projectDepartmentId: this.projectDepartmentId,
						engineerId: this.engineerId,
					}
				}).then(res => {
					if (res.code == 200) {
						this.listArray = res.data.list
					}
				}).catch(() => {})
			},
			// formReset: function(e) {
			// 	console.log('清空数据')
			// },
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindDateChange1: function(e) {
				this.date1 = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		}
	}
</script>

<style lang="less">
	.content {
		background: #fff;
		height: 100%;
	}

	.noneList {
		margin-top: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: calc(36.7em);
	}

	.table {
		margin-top: 15px;
		padding: 0 20px;
		height: calc(36.7em);
		// height: 500px;
		padding-bottom: 20px;

		.table_item {
			margin-bottom: 30px;

			table,
			table tr th,
			table tr td {
				border: 1px solid #000;
			}

			table {
				width: 100%;

				tr {
					width: 100%;

					td {
						padding: 0;
						font-size: 14px;
						width: calc(100% / 9);
						line-height: 20px;
						text-align: center;
					}

					.active {
						font-weight: 600;
					}
				}

			}

			.table_item_name {
				text-align: center;
				background: #D8D8D8;
			}
		}
	}

	.queryCondition {
		margin-top: 15px;
		padding: 0 10px;
		box-sizing: border-box;

		.form_time {
			display: flex;
			justify-content: space-between;

			.title {
				width: 44px;
				text-align: center;
			}

			.uni-input {
				width: 120px;
				box-sizing: border-box;
			}

			.endtime {
				border: 1px solid #000000;
				border-radius: 5px;
				overflow: hidden;

				.uni-input {
					padding: 0;
					text-align: center;
				}
			}
		}

		.form_two {
			margin-top: 15px;
			display: flex;
			justify-content: space-between;

			.title {
				width: 46px;
				text-align: center;
			}

			.uni-input {
				width: 120px;
				box-sizing: border-box;
			}

			.endtime {
				border: 1px solid #000000;
				border-radius: 5px;
				overflow: hidden;

				.uni-input {
					padding: 0;
					text-align: center;
				}
			}
		}

		.form_btn {
			margin-top: 15px;
			text-align: right;
			.refresh{
				margin-left: 10px;
			}
		}

	}
</style>
